<template>
  <div class="list" ref="wrapper">
    <div>
      <!-- 热门 -->
      <div class="brandpanel">
        <h3 class="title">热门</h3>
        <div class="panelbox">
          <ul class="brandtype">
            <li v-for="(item,index) in hotCities" :key="index" @click="onclick(index)">
              <div class="brandimg">
                <img :src="item.imgsrc" />
              </div>
              <p class="brandname">{{item.brandname}}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 列表 -->
      <div class="brandpanel" v-for="(item,key) in cities" :key="key" :ref="key">
        <h3 class="title">{{key}}</h3>
        <div class="panelbox">
          <ul class="brandlist">
            <li v-for="innerItem in item" :key="innerItem.id" @click="onclick(innerItem.id)">
              <div class="button">{{innerItem.name}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <transition name="fade">
      <div class="toast" v-show="showToast">
        <span class="letter">{{this.letter}}</span>
      </div>
    </transition>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
import eventBus from '../../../../static/js/eventBus'
export default {
  name: 'tList',
  props: {
    cities: Object,
    hotCities: Array
  },
  data () {
    return {
      letter: '',
      showToast: false
    }
  },
  watch: {
    letter () {
      if (this.letter) {
        const elment = this.$refs[this.letter][0]
        this.scroll.scrollToElement(elment)
        this.changeToast()
      }
    }
  },
  methods: {
    onclick (index) {
      console.log(index)
    },
    changeToast () {
      this.showToast = true
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.showToast = false
      }, 500)
    }
  },
  mounted () {
    eventBus.$on('change', letter => {
      // console.log(letter)
      this.letter = letter
    })
    this.scroll = new Bscroll(this.$refs.wrapper, {
      click: true
    })
  }
}
</script>
<style lang="stylus" scoped>
.list {
  position: absolute;
  overflow: hidden;
  top: 1rem;
  left: 0;
  right: 0;
  bottom: 1rem;

  .brandpanel {
    .title {
      font-size: 0.32rem;
      line-height: 0.7rem;
      padding-left: 0.3rem;
      background: #f6f5f5;
      position: relative;

      &::before {
        content: '';
        width: 0.04rem;
        height: 0.22rem;
        background: #d21733;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.11rem;
      }
    }

    .panelbox {
      .brandtype {
        list-style: none;
        clear: both;
        overflow: hidden;
        width: 97%;
        padding: 0.26rem 0;

        li {
          width: 33.333%;
          float: left;
          text-align: center;

          .brandimg {
            width: 1.6rem;
            height: 1.6rem;
            font-size: 0;
            line-height: 1.6rem;
            vertical-align: middle;
            margin: 0 auto;

            img {
              max-width: 100%;
              max-height: 100%;
              display: block;
            }
          }

          .brandname {
            font-size: 0.28rem;
            color: #666;
            padding: 0.1rem 0.36rem;
            line-height: 1.3;
          }
        }
      }

      .brandlist {
        li {
          list-style: none;
          font-size: 0.28rem;
          color: #666;
          line-height: 0.85rem;
          padding-left: 0.3rem;
        }
      }
    }
  }
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  background: #d21733;
  border-radius: 50%;
  text-align: center;
  transition: all 0.5s;

  &.fade-enter {
    opacity: 0;
  }

  &.fade-leave, &.fade-enter-active {
    opacity: 1;
  }

  &.fade-leave-active {
    opacity: 0;
  }

  .letter {
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    color: #eee;
  }
}
</style>
